<template>
  <div>
    <!-- 表单 -->
    <el-form :model="formData" inline ref="searchForm">
      <el-form-item
        v-for="item in searchOptoins"
        :key="item.prop"
        :label="item.label"
        v-bind="item.attr"
      >
        <el-input
          v-if="item.type == 'input'"
          v-bind="item.attrs"
          v-model="formData[item.prop]"
        ></el-input>
        <el-select
          v-else-if="item.type == 'select'"
          v-model="formData[item.prop]"
          :="item.attrs"
        >
          <el-option
            v-for="(c2, index) in item.options"
            :label="c2.label"
            :value="c2.value"
            :key="index"
          ></el-option>
        </el-select>

        <el-tree-select
          v-model="formData[item.prop]"
          v-bind="item.attrs"
          v-else-if="item.type == 'selectTree'"
        ></el-tree-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table style="width: 100%" :data="tableData">
      <el-table-column v-for="col in column" :key="col.prop" v-bind="col">
        <template #default="{ row, index }">
          <template v-if="col.slot">
            <slot :name="col.slot" :row="row" :index="index"></slot>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <el-scrollbar>
      <div class="mt-[12px]">
        <el-pagination
          v-model:current-page="paginatgion.currentPage"
          v-bind="paginatgion"
          v-on="paginationEvents"
        />
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { PropType, reactive } from "vue";
const emits = defineEmits(["handleSearch", "handleReset"]);

type PaginationTpe = {};
type columnType = {
  label: string;
  prop: string;
  width?: string;
  [key: string]: any;
};
const props = defineProps({
  column: {
    type: Array,
    default: () => [],
  },
  searchOptoins: {
    type: Array,
    default: () => [],
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  formData: {
    type: Object,
    default: () => {},
  },
  paginationProps: {
    type: Object,
    default: () => ({
      // background: true,
      // layout: "total, sizes, prev, pager, next, jumper",
      // pageSize: 20,
      // pageSizes: [10, 20, 30, 50],
      // total: 0,
      // currentPage: 1,
    }),
  },
  paginationEvents: {
    type: Object,
  },
});

const defaultPaginatoin = {
  background: true,
  layout: "total, sizes, prev, pager, next, jumper",
  pageSize: 20,
  pageSizes: [10, 20, 30, 50],
  total: 0,
  currentPage: 1,
};

const paginatgion = reactive({
  ...defaultPaginatoin,
  ...props.paginationProps,
});

function handleQuery() {
  emits("handleSearch");
}
function handleReset() {
  emits("handleReset");
}
</script>

<style scoped></style>
